<template>
  <div class="main">
    <!-- 修饰品 -->
    <div class="bln"><img src="@/assets/波浪能.png" alt="" /></div>
    <div class="dzs"><img src="@/assets/点装饰.png" alt="" /></div>
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="panel">
      <el-row :gutter="0">
        <el-col :span="12">
          <!-- 注册表单+ 动画 -->
          <transition name="fade">
            <div class="grid info" v-if="!isLogin">
              <div class="tip_title">
                <span class="tip">欢迎使用</span>
                <span class="sys_title">作业管理系统</span>
              </div>
              <div class="phone">
                <span class="tip">用户名</span>
                <input type="text" v-model="registerForm.userName" placeholder="请输入手机号" class="input_css" />
              </div>
              <!-- 手机号框 -->
              <div class="phone">
                <span class="tip">手机号</span>
                <input type="text" v-model="registerForm.phone" placeholder="请输入手机号" class="input_css" />
              </div>
              <!-- 密码框 -->
              <div class="password">
                <span class="tip">密码</span>
                <input type="password" v-model="registerForm.password" placeholder="请输入密码" class="input_css" />
              </div>
              <!-- 密码框 -->
              <div class="password">
                <span class="tip">确认密码</span>
                <input type="compassword" v-model="registerForm.compassword" placeholder="请输入密码" class="input_css" />
              </div>
              <!-- 注册 -->
              <div class="login">
                <el-button type="primary" plain :loading="loading" @click="registerFun"
                  style="width: 290px; height: 45px; border-radius: 15px">{{ loading ? "注册中" : "注册" }}
                  <el-icon>
                    <Position />
                  </el-icon>
                </el-button>
              </div>
              <div class="register">
                <span>有账户？</span>
                <a href="javascript:;" style="color: rgba(75, 113, 255, 1)" @click="toRegister">去登录</a>
              </div>
            </div>
          </transition>
          <transition name="fade">
            <div class="grid" v-if="isLogin">
              <img src="@/assets/login.png" alt="" class="login_img" />
            </div>
          </transition>
        </el-col>
        <el-col :span="12">
          <transition name="fade">
            <div class="grid" v-if="!isLogin">
              <img src="@/assets/register.png" alt="" class="login_img" />
            </div>
          </transition>
          <transition name="fade">
            <div class="grid info" v-if="isLogin">
              <div class="tip_title">
                <span class="tip">欢迎使用</span>
                <span class="sys_title">作业管理系统</span>
              </div>
              <!-- 手机号框 -->
              <div class="phone">
                <span class="tip">手机号</span>
                <input type="text" v-model="loginForm.phone" placeholder="请输入手机号" class="input_css" />
              </div>
              <!-- 密码框 -->
              <div class="password">
                <span class="tip">密码</span>
                <input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input_css" />
              </div>
              <!-- 登录 -->
              <div class="login">
                <el-button type="primary" plain :loading="loading"
                  style="width: 290px; height: 45px; border-radius: 15px" @click="login">{{ loading ? "登录中" : "登录" }}
                  <el-icon>
                    <Position />
                  </el-icon>
                </el-button>
              </div>
              <div class="register">
                <span>还没有账户？</span>
                <a href="javascript:;" style="color: rgba(75, 113, 255, 1)" @click="toRegister">注册</a>
              </div>
            </div>
          </transition>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { Position } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { goLogin, goRegister, getUserInfoByIdApi } from "@/api/index";
import useUserInfo from "store/useUserInfo.js";
// 解密token
import { parseJwt } from "@/utils/parseJwtToken";
import { useRouter } from "vue-router";

// const route = useRoute();
const router = useRouter();

const useUserInfoStore = useUserInfo();
const loading = ref(false);
// 是否登录
const isLogin = ref(true);
const toRegister = () => {
  isLogin.value = !isLogin.value;
};

// 收集登录信息
const loginForm = ref({
  phone: 15778122247,
  password: "123456",
});
// 登录
const login = async () => {
  console.log("登录");
  loading.value = true;
  const json = await goLogin(loginForm.value.phone, loginForm.value.password);
  console.log(json);
  loading.value = false;
  if (json.code !== "10000") {
    ElMessage({
      showClose: true,
      message: json.message,
      type: "error",
    });
    return;
  }

  let userinfo = parseJwt(json.data.token);
  console.log(userinfo, "uuu");

  ElMessage({
    showClose: true,
    message: `欢迎${userinfo.name}的登录!`,
    type: "success",
  });
  sessionStorage.setItem("token", json.data.token);
  sessionStorage.setItem("userInfo", JSON.stringify(userinfo));
  useUserInfoStore.$patch({
    token: json.data.token,
    userInfo: userinfo,
    roleType: userinfo.roleType,
  });
  // 登录成功后获取用户信息
  const getUserInfo = await getUserInfoByIdApi(userinfo.userId);
  console.log(getUserInfo, "getUserInfo");
  useUserInfoStore.userDetail = getUserInfo.data
  sessionStorage.setItem("userDetail", JSON.stringify(getUserInfo.data));
  // console.log(useUserInfoStore.token, "token");
  router.push("/");
};

// 收集注册信息
const registerForm = ref({
  userName: null,
  phone: null,
  password: null,
  compassword: null,
});
// 注册
const registerFun = async () => {
  if (
    !registerForm.value.phone ||
    !registerForm.value.password ||
    !registerForm.value.compassword ||
    !registerForm.value.userName
  ) {
    ElMessage({
      showClose: true,
      message: "请将信息输入完整",
      type: "error",
    });
    return;
  }
  if (registerForm.value.password !== registerForm.value.compassword) {
    ElMessage({
      showClose: true,
      message: "两次密码输入不一致",
      type: "error",
    });
    return;
  }
  loading.value = true;
  const json = await goRegister(
    registerForm.value.phone,
    registerForm.value.userName,
    registerForm.value.password
  );
  loading.value = false;
  console.log(json, "json");
  if (json.code !== "10000") {
    ElMessage({
      showClose: true,
      message: json.message,
      type: "error",
    });
    return;
  }
  ElMessage({
    showClose: true,
    message: `注册成功，可以去登录啦!`,
    type: "success",
  });
  registerForm.value = {
    phone: null,
    password: null,
    compassword: null,
  };
}
onMounted(() => {
  console.log("3.-组件挂载到页面之后执行-------onMounted", useUserInfo);
  // 更改一级菜单索引
  sessionStorage.setItem("KEY_INDEX", 1);
});
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  background-color: rgba(75, 113, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .bln {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;

    // height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .dzs {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    z-index: 10;
    border: 30px solid rgba(75, 113, 255, 1);
  }

  .circle1 {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    // background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: -175px;
    left: -175px;
    z-index: 10;
    opacity: 0.1;
    border: 30px solid rgba(0, 0, 0, 1);
  }

  .circle2 {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    // background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: -125px;
    left: -125px;
    z-index: 10;
    border: 30px solid rgba(0, 0, 0, 1);
    opacity: 0.1;
  }

  .circle3 {
    width: 550px;
    height: 550px;
    border-radius: 50%;
    // background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: -275px;
    left: -275px;
    z-index: 10;
    opacity: 0.1;
    border: 30px solid rgba(0, 0, 0, 1);
  }

  .circle4 {
    width: 750px;
    height: 750px;
    border-radius: 50%;
    // background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: -375px;
    left: -375px;
    z-index: 10;
    opacity: 0.1;
    border: 30px solid rgba(0, 0, 0, 1);
  }

  .panel {
    background-color: #fff;
    width: 1100px;
    height: 700px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;

    .grid {
      width: 50%;
      height: 700px;
      position: absolute;

      .login_img {
        width: 550px;
        height: 100%;
      }

      .tip {
        font-size: 17.78px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24.39px;
        color: rgba(122, 133, 143, 1);
        text-align: left;
        vertical-align: top;
        font-weight: 600;
        margin-bottom: 15px;
      }

      .sys_title {
        font-size: 28.44px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 39.03px;
        color: rgba(75, 113, 255, 1);
        text-align: left;
        font-weight: 600;
        vertical-align: top;
      }

      .phone,
      .password {
        display: flex;
        flex-direction: column;
        width: 290px;
        transform: translateY(-30px);
        color: rgba(75, 113, 255, 1);

        .input_css {
          border: none;
          border-bottom: 1px solid rgba(230, 230, 230, 0.8);
          height: 35px;
        }
      }

      .password {
        margin-top: 20px;
      }

      .login {
        // transform: translateY(10px);
        width: 290px;
        height: 45px;
        display: flex;

        overflow: hidden;
        justify-content: center;
        align-items: center;
      }

      .register {
        transform: translateY(20px);
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .tip_title {
        width: 290px;
        display: flex;
        flex-direction: column;
        transform: translateY(-90px);
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease-out;
  position: absolute;
  z-index: 9;
}

.fade-enter-active {
  transition-delay: 0.8s;
}

.fade-enter-from,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  transform: translateY(100%);
  opacity: 0;
}
</style>
